<!DOCTYPE html>
<html lang="cn">

	<head>
		<meta charset="utf-8" />
		<title>blog</title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/reset.css" />
	<link rel="stylesheet" type="text/css" href="css/main.css" />

	<body>
		<div class="main-wrapper">
		<header>
			<nav>
				<div class="log">
					<a href="">DGW</a>
				</div>
				<ul>
					<li>
						<a href="" class="active">首页</a>
					</li>
					<li>
						<a href="">关于</a>
					</li>
					<li>
						<a href="">图片</a>
					</li>
					<li>
						<a href="">设置</a>
					</li>
				</ul>
			</nav>
			<div id="banner">

				<div class="inner">
					<h1>Mr Dai</h1>
					<p class="sub-heading">爱吃零食的孩子都是好孩子</p>
					<button>了解我</button>
					<div class="more">
						更多
					</div>
				</div>

			</div>
		</header>
		<div class="content">
			<section class="green-section">
				<div class="wrapper">
					<div>
						<h2>内容1</h2>
						<div class="hr"></div>
						<p class="sub-heading2">内容1内容1内容1内容1内容1内容1内容1内容1
						内容1内容1内容1</p>
					</div>
					<div class="icon-groud">
						<span class="icon">图标1</span>
						<span class="icon">图标2</span>
						<span class="icon">图标3</span>
					</div>
				</div>
			</section>
			<section class="gray-section">
				<div class="article-preview">
					<div class="img-section">
						<img src="img/pic01.jpg"/>
					</div>
				    <div class="text-section">
				    	<h2>标题的简介</h2>
				    	<p>标题的简介标题的简介标题的简介标题的简介
				    	标题的简介标题的简介标题的简介标题的简介</p>
				    </div>
				</div>
				<div class="article-preview">
					
				    <div class="text-section">
				    	<h2>标题的简介</h2>
				    	<p>标题的简介标题的简介标题的简介标题的简介
				    	标题的简介标题的简介标题的简介标题的简介</p>
				    </div>
				    <div class="img-section">
						<img src="img/pic02.jpg"/>
					</div>
				</div>
				<div class="article-preview">
					<div class="img-section">
						<img src="img/pic03.jpg"/>
					</div>
				    <div class="text-section">
				    	<h2>标题的简介</h2>
				    	<p>标题的简介标题的简介标题的简介标题的简介
				    	标题的简介标题的简介标题的简介标题的简介</p>
				    </div>
				</div>
				
			</section>
			<section class="purple-section">
				<div class="wrapper">
				<div class="headwrapper">
					<h2>个人简述</h2>
					<div class="hr"></div>
					<div class="subheading3">
						个人简述个人简述个人简述
						个人简述个人简述个人简述
						个人简述个人简述个人简述
						个人简述个人简述个人简述
					</div>
				</div>
				<div class="cardgroup clearFixed">
					<div class="card">
						<h3>标题1</h3>
						<p>标题1标题1标题1标题1标题1标题1</p>
					</div>
					<div class="card">
						<h3>标题2</h3>
						<p>标题2标题2标题2标题2标题2标题2</p>
					</div>
				</div>
				<div class="cardgroup clearFixed">
					<div class="card">
						<h3>标题1</h3>
						<p>标题1标题1标题1标题1标题1标题1</p>
					</div>
					<div class="card">
						<h3>标题2</h3>
						<p>标题2标题2标题2标题2标题2标题2</p>
					</div>
				</div>
				<div class="cardgroup clearFixed">
					<div class="card">
						<h3>标题1</h3>
						<p>标题1标题1标题1标题1标题1标题1</p>
					</div>
					<div class="card">
						<h3>标题2</h3>
						<p>标题2标题2标题2标题2标题2标题2</p>
					</div>
				</div>
				</div>
			</section>
		</div>

		<footer >
			<ul class="share-group">
				<li>item1</li>
				<li>item2</li>
				<li>item3</li>
				<li>item4</li>
				<li>item5</li>
			</ul>
			<div class="copy">
				&copy;代国威
			</div>
		</footer>
		</div>
	</body>

</html>